use dioxus::prelude::*;

use crate::components::menu::{Menu, MenuGroup, MenuItem};

const AVATAR_PNG: Asset = asset!("assets/images/icons/avatar.png");
const LOGO_SVG: Asset = asset!("assets/images/logo.svg");
const SIDEBAR_CSS: Asset = asset!("assets/css/components/sidebar.css");
const HOME_SVG: Asset = asset!("assets/images/svgs/home.svg");

#[component]
pub fn Sidebar() -> Element {
    rsx! {
        // 引入菜单样式
        document::Link {
            rel: "stylesheet",
            href: SIDEBAR_CSS,
        }

        aside {
            class: "sidebar",

            // Logo区域
            div { class: "sidebar-header",
                img {
                    src: LOGO_SVG,
                    class: "sidebar-logo",
                    alt: "Logo"
                }
            }
            // 菜单区域
            Menu {
                MenuGroup{
                    title: "Dashboard",
                    MenuItem {
                        icon: HOME_SVG,
                        text: "Overview",
                        is_active: true,
                        has_arrow: true,
                    }
                }
            }

            // 底部功能区
            div { class: "sidebar-footer",
                img {
                    src: AVATAR_PNG,
                    class: "user-avatar",
                    alt: "User Avatar"
                }
                div { class: "user-info",
                    h3 { "Brooklyn Alice" }
                    span { "Admin" }
                }
            }
        }
    }
}
